<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" :key="$route.fullPath"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
    <loading :show="pageLoading"></loading>

    <!-- Get Unionid Dialog -->
    <div v-transfer-dom>
      <x-dialog
        v-model="unionidAuthDialogShow"
        class="unionid-authrize-dialog"
        dialog-transition="dialog-slideup"
        :dialog-style="{ maxWidth: '85%', borderRadius: '15px' }"
      >
        <div style="padding: 20px 15px;color: #999;">
          <div style="text-align: center;font-size: .8rem;">
            {{ $t('authrizeTips') }}
          </div>
          <div style="margin-top: 10px;text-align: center;">
            <span class="authrize-btn" @click="agreeToAuthorize">
              {{ $t('gotoAuthrize') }}
            </span>
          </div>
        </div>
      </x-dialog>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { Loading, XDialog, TransferDom, Popup, XButton } from 'vux'
import {
  SCOPE_SNSAPI_USERINFO,
  wechatGetCode,
} from '@/wxLogin'

export default {
  name: 'app',
  directives: {
    TransferDom
  },
  computed: {
    ...mapGetters([
      'pageLoading',
      'userInfo'
    ]),
    unionidAuthDialogShow() {
      return !this.userInfo.userProfile.hasUnionid
    }
  },
  methods: {
    agreeToAuthorize() {
      wechatGetCode(SCOPE_SNSAPI_USERINFO)
    },
  },
  components: {
    Loading,
    XDialog,
    Popup,
    XButton
  }
}
</script>

<style lang="scss">
.unionid-authrize-dialog {
  .cancel-btn {
    width: 100%;
    font-size: .7rem;
    color: #999;
    text-align: center;
    margin-top: 15px;
  }

  .authrize-btn {
    background-image: linear-gradient(200deg, #8ccf86, #1AAD19);
    display: block;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    padding: 8px 24px;
    box-sizing: border-box;
    font-size: .8rem;
    line-height: 1.8;
    text-align: center;
    color: #fff;
    border-radius: 4px;
    animation: scaleAnimation 3s infinite ease;

  }
}

.qywechat-qrcode-diaolog {
  .active-qrcode-wrapper {
    padding: 25px 15px;
    .notice-tips {
      padding: 10px;
    }

    .active-qrcode {
      img {
        width: 60%;
      }
    }

    .cancel-btn {
      width: 100%;
      font-size: .8rem;
      color: #999;
      text-align: center;
      margin-top: 15px;
    }
  }
}
</style>


